/**
* 基础菜单 app设计管理
*/
<template>
  <div>
    <div id="emptyCls"></div>

    <div class="container-fluid">
      <div class="row">
        <el-row class="designMenu">
          <el-col :span="24">
            <el-button @click="$router.back(-1)" plain round size="mini"
              >返回</el-button
            >
            <el-button type="primary" @click="save" plain round size="mini"
              >保存</el-button
            >
            <el-button type="primary" @click="undo" plain round size="mini"
              >撤销</el-button
            >
            <el-button type="primary" @click="redo" plain round size="mini"
              >还原</el-button
            >
          </el-col>
        </el-row>
        <el-divider></el-divider>

        <nav id="sidebarMenu" class="col-md-2">
          <div class="card border-light mb-3">
            <div class="card-header">基础组件</div>
            <div class="card-body">
              <div class="toolBox row row-cols-2 g-2">
                <div class="col compoment bgcolor" com="bgcolor">
                  <i class="bi bi-palette-fill"></i>
                  <div>背景色</div>
                </div>
                <div class="col compoment layout" com="layout">
                  <i class="bi bi-grid-1x2-fill"></i>
                  <div>布局</div>
                </div>
                <div class="col compoment text" com="text">
                  <i class="bi bi-type"></i>
                  <div>文本</div>
                </div>
                <div class="col compoment button" com="button">
                  <i class="bi bi-stop-btn-fill"></i>
                  <div>按钮</div>
                </div>
                <div class="col compoment switch" com="switch">
                  <i class="bi bi-toggle-on"></i>
                  <div>开关</div>
                </div>
              </div>
            </div>
          </div>
        </nav>

        <main role="main" class="col-md-5">
          <div class="card-body designBox">
            <div class="phoneHead"></div>
            <div class="pageTitle">{{ product.name }}设备详情</div>
            <div class="pageContent">
              <div id="rootWiget" class="main _container"></div>
            </div>
            <div class="pageBottom"></div>
          </div>
        </main>

        <div id="propertyBox" class="col-md-5">
          <el-tabs type="border-card">
            <el-tab-pane label="外观">
              <el-form ref="form" label-width="120px">
                <el-form-item label="格数" v-if="wgData.name == 'layout'">
                  <el-radio-group
                    @change="updateWgData"
                    v-model="wgData.props.colSize"
                    size="small"
                  >
                    <el-radio-button label="1"></el-radio-button>
                    <el-radio-button label="2"></el-radio-button>
                    <el-radio-button label="3"></el-radio-button>
                    <el-radio-button label="4"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="文字"
                  v-if="wgData.name == 'text' || wgData.name == 'button'"
                >
                  <el-input
                    @change="updateWgData"
                    v-model="wgData.props.text"
                    size="small"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="交互">
              <el-form ref="form" label-width="120px">
                <el-form-item
                  label="显示属性"
                  v-if="
                    wgData.name == 'text' ||
                    wgData.name == 'button' ||
                    wgData.name == 'switch'
                  "
                >
                  <el-select
                    v-model="wgData.binds.property"
                    placeholder="选择属性"
                  >
                    <el-option label="无" value=""></el-option>
                    <el-option
                      v-for="prop in properties"
                      :key="prop.identifier"
                      :label="prop.name"
                      :value="prop.identifier"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <div v-if="wgData.name == 'button'">
                  <el-form-item label="执行动作">
                    <el-select
                      @change="serviceSelect"
                      v-model="wgData.action.service.identifier"
                      placeholder="选择要执行的动作"
                    >
                      <el-option
                        v-for="s in services"
                        :key="s.identifier"
                        :label="s.name"
                        :value="s.identifier"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="参数"
                    v-if="wgData.action.service.identifier"
                  >
                    <el-row
                      v-for="para in wgData.action.service.params"
                      :key="para.identifier"
                    >
                      <el-col :span="6" style="text-align: center">
                        {{ para.name }}:
                      </el-col>
                      <el-col :span="18">
                        <el-input
                          v-if="para.dataType.type == 'text'"
                          v-model="para.value"
                          size="small"
                        ></el-input>
                        <el-select
                          v-if="para.dataType.type == 'bool'"
                          v-model="para.value"
                          placeholder="服务参数"
                        >
                          <el-option
                            v-for="(key, value, index) in para.dataType.specs"
                            :key="key"
                            :label="key"
                            :value="value"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </div>

                <!--===========开关==============-->
                <div v-if="wgData.name == 'switch'">
                  <el-form-item label="执行开动作">
                    <el-select
                      @change="switchOnServiceSelect"
                      v-model="wgData.action.switchOn.identifier"
                      placeholder="选择要执行的动作"
                    >
                      <el-option
                        v-for="s in services"
                        :key="s.identifier"
                        :label="s.name"
                        :value="s.identifier"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="参数"
                    v-if="wgData.action.switchOn.identifier"
                  >
                    <el-row
                      v-for="para in wgData.action.switchOn.params"
                      :key="para.identifier"
                    >
                      <el-col :span="6" style="text-align: center">
                        {{ para.name }}:
                      </el-col>
                      <el-col :span="18">
                        <el-input
                          v-if="para.dataType.type == 'text'"
                          v-model="para.value"
                          size="small"
                        ></el-input>
                        <el-select
                          v-if="para.dataType.type == 'bool'"
                          v-model="para.value"
                          placeholder="服务参数"
                        >
                          <el-option
                            v-for="(key, value, index) in para.dataType.specs"
                            :key="key"
                            :label="key"
                            :value="value"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item
                    label="执行关动作"
                    v-if="wgData.name == 'switch'"
                  >
                    <el-select
                      @change="switchOffServiceSelect"
                      v-model="wgData.action.switchOff.identifier"
                      placeholder="选择要执行的动作"
                    >
                      <el-option
                        v-for="s in services"
                        :key="s.identifier"
                        :label="s.name"
                        :value="s.identifier"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="参数"
                    v-if="wgData.action.switchOff.identifier"
                  >
                    <el-row
                      v-for="para in wgData.action.switchOff.params"
                      :key="para.identifier"
                    >
                      <el-col :span="6" style="text-align: center">
                        {{ para.name }}:
                      </el-col>
                      <el-col :span="18">
                        <el-input
                          v-if="para.dataType.type == 'text'"
                          v-model="para.value"
                          size="small"
                        ></el-input>
                        <el-select
                          v-if="para.dataType.type == 'bool'"
                          v-model="para.value"
                          placeholder="服务参数"
                        >
                          <el-option
                            v-for="(key, value, index) in para.dataType.specs"
                            :key="key"
                            :label="key"
                            :value="value"
                          >
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <div id="compomentTemplate" style="display: none">
        <div class="_compoment _bgcolor _container"></div>
        <div class="row row-cols-2 _compoment _layout"></div>
        <div class="col _cell _container"></div>
        <button type="button" class="btn btn-primary _compoment _button">
          按钮
        </button>
        <span class="_compoment _text">文本</span>
        <div class="_compoment _switch form-check form-switch">
          <input class="form-check-input" type="checkbox" checked />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "../../assets/css//bootstrap.min.css";
@import "../../assets/css/bootstrap-icons.css";
@import "../../assets/css/design.css";
</style>
<script>
import "../../assets/js/jquery-3.6.0.min.js";
import "../../assets/js/bootstrap.min.js";

import {
  webDesign,
  propertySetting,
  designDataStack,
} from "../../assets/js/design.js";

import { DesignDetail, saveDesign } from "../../api/appApi.js";
import { GetProduct, GetThingModel } from "../../api/productApi";

export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      designDetail: {},
      code: "",
      product: {},
      wgData: {
        binds: {
          property: {},
        },
        action: {
          service: {
            name: "",
            params: "",
          },
        },
      },
      properties: [],
      services: [],
      selectedSerivce: "",
    };
  },
  // 注册组件
  components: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },
  mounted() {
    webDesign.init();
    propertySetting.setVue(this);
  },
  watch: {
    wgData: {
      handler: function () {
        console.log("wgData:", this.wgData);
      },
      deep: true,
    },
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getdata(parameter) {
      let ddId = this.$route.query.id;
      let pk = this.$route.query.productKey;
      DesignDetail(ddId).then((res) => {
        webDesign.restore(JSON.parse(res.template));
      });

      GetProduct(pk).then((res) => {
        this.product = res;
      });

      GetThingModel(pk).then((res) => {
        this.properties = res.model.properties;
        let writeProperties = [];
        //可写属性
        this.properties.forEach((p) => {
          if (p.accessMode.indexOf("w") >= 0) {
            writeProperties.push(p);
          }
        });
        res.model.services.push({
          identifier: "set",
          name: "设置属性",
          inputData: writeProperties,
        });

        this.services = res.model.services;
      });
    },
    updateWgData() {
      console.log(propertySetting);
      propertySetting.update(this.wgData);
    },
    save() {
      let pk = this.$route.query.productKey;
      let ddId = this.$route.query.id;
      let result = webDesign.serialize();
      console.log(JSON.stringify(result));
      saveDesign({
        id: ddId,
        productKey: pk,
        template: JSON.stringify(result),
      }).then((res) => {
        this.$message({
          type: "success",
          message: "保存成功！",
        });
      });
    },
    undo() {
      designDataStack.undo();
    },
    redo() {
      designDataStack.redo();
    },
    actionSelect(v) {
      console.log(v);
    },
    actionServiceSet(v, type) {
      for (let i in this.services) {
        let service = this.services[i];
        if (service.identifier == v) {
          this.wgData.action[type] = {
            identifier: service.identifier,
            name: service.name,
            params: JSON.parse(JSON.stringify(service.inputData)),
          };
        }
      }
    },
    serviceSelect(v) {
      this.actionServiceSet(v, "service");
    },
    switchOnServiceSelect(v) {
      this.actionServiceSet(v, "switchOn");
    },
    switchOffServiceSelect(v) {
      this.actionServiceSet(v, "switchOff");
    },
  },
};
</script>
